<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link href="../static/css/bootstrap.min.css"  rel="stylesheet">
    <script src="../static/js/jquery-1.12.4.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>Title</title>
    <!--<script src="../jquery-1.7.2.min.js"></script>-->
    <script src="../static/js/vue-2.4.0.js"></script>
    <script src="../static/js/vue-resource-1.3.4.js"></script>

    <style type="text/css">
        .box{
            float: left;
            width: 250px;
            height: 220px;
            margin-left: 70px;
            margin-bottom: 10px;
            padding:0;
            /* 		border:1px solid red; */
        }
        .hader{
            width:90%;
            height:50px;
            margin-bottom: 10px;
            margin-left:20px;
            text-align:center;
        }

        li{
            list-style-type:none;
        }
        .newalbum{
            text-align:center;
        }
        font{
            font-weight:bold;
        }

        .upload{
            width:40%;
            height:400px;
            /*background:url(${pageContext.request.contextPath}/aimg/bj7.jpg) no-repeat 2px 2px;*/
            border:1px solid #dee2e7;
            background:white;
            margin-left:450px;
            margin-top:100px;
            position: absolute;
            border-radius:20px;
            padding-left: 5px;
        }

        #divdiv {
            width: 100%;
            /* 		background: transparent; */
            z-index: 50000;
            position: fixed;
            top: 0;
            left: 0;
            background-color:rgba(0,0,0,0.4);
            display: none;
            height: 100%;
        }
        .tt{
            min-width: 400px;
            min-height: 500px;
            border:1px red solid;
        }

    </style>

    <!--隐藏窗口-->
    <script type="text/javascript">
        $(function(){
            $("#close").click(function(){
                $("#divdiv").hide();
            });
            $("#btn").click(function(){
                $("#divdiv").show();
            });
        });
    </script>
</head>
<body>

<div id="app" class="container">

    <!--列表展示begin-->
    <div class="row" style="margin-top:20px; text-align:center">
        <table class="table table-bordered table-hover table-responsive" style="width: 80%; text-align: center" >
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>邮箱</th>
                <th>头像</th>
                <th>操作</th>
            </tr>
            <tr v-for="u in lists">
                <td >{{u.id}}</td>
                <td >{{u.name}}</td>
                <td >{{u.age}}</td>
                <td >{{u.sex}}</td>
                <td >{{u.email}}</td>
                <td><img :src="u.face" width="50px" height="50px"></td>
                <td>
                    <a href="javascript:void(0)" @click="toupd(u.id)" >修改</a>
                    <a href="javascript:void(0)" @click="del(u.id)">删除</a>
                </td>
            </tr>
        </table>
    </div>
    <!--列表展示end-->

    <div class="newalbum">
        <a class="btn btn-info" id="btn" href="#" role="button" >添加</a>
    </div>

    <!-- 新增、编辑表单 begin -->
    <div class="row" >
        <div id="divdiv">
            <div class="upload">
                <a> <input  id="close"  type="button" @click="get()" value="关闭" class="btn btn-primary" href="#" style="height: 40px;margin-left: 87%;margin-bottom:15px;width: 50px;text-align: center; "/></a>
                <br>
                <form class="form-horizontal" action="../user/add" enctype="multipart/form-data" method="post" >
                    <input type="hidden" v-model="id" name="id">

                    <div class="form-group">
                        <label for="inputname" class="col-sm-1 control-label">Name:</label>&nbsp;&nbsp;
                        <div class="col-sm-10" style="margin-left: 15px">
                            <input type="text" class="form-control" id="inputname" placeholder="Name" name="name" v-model="name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="pwd" class="col-sm-1 control-label">Name:</label>&nbsp;&nbsp;
                        <div class="col-sm-10" style="margin-left: 15px">
                            <input type="password" class="form-control" id="pwd" placeholder="pwd" name="pwd" v-model="pwd">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="age" class="col-sm-1 control-label">Age:&nbsp;&nbsp;</label>
                        <div class="col-sm-10" style="margin-left: 15px">
                            <input type="text" class="form-control" id="age" placeholder="Age" name="age"  v-model="age">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-1 control-label">Sex:&nbsp;&nbsp;</label>
                    <div class="radio">
                        <label>
                            <input type="radio" value="男"  placeholder="sex" name="sex"  v-model="sex">男
                        </label>
                        <label>
                            <input type="radio" value="女"  placeholder="sex" name="sex"  v-model="sex">女
                        </label>
                    </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-1 control-label">Email:&nbsp;&nbsp;</label>
                        <div class="col-sm-10" style="margin-left: 15px">
                            <input type="email" class="form-control" id="email" placeholder="Email" name="email" v-model="email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="face" class="col-sm-1 control-label">face:&nbsp;&nbsp;</label>
                        <div class="col-sm-10" style="margin-left: 15px">
                            <!--<img :src="u.face" width="50px" height="50px">-->
                            <input type="file" class="form-control" id="face" placeholder="face" name="faces" >
                            <input type="hidden" class="form-control"  placeholder="face" name="face" v-model="face">
                        </div>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <label for="face" class="col-sm-1 control-label">所在部门:&nbsp;&nbsp;</label>-->
<!--                        <div class="col-sm-10" style="margin-left: 15px">-->
<!--                            <select name="" v-model="country">-->
<!--                                <option :value="item" v-for="(item,index) in deptLists">{{item.country}}</option>-->
<!--                            </select>-->
<!--                            <select name="" v-model="cityName">-->
<!--                                <option :value="item" v-for="(item,index) in country.city">{{item}}</option>-->
<!--                            </select>-->
<!--                        </div>-->
<!--                    </div>-->

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10" style="margin-left: 240px">
                            <button type="submit" class="btn btn-default">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 新增、编辑表单 end -->

</div>
</body>
<script type="text/javascript">
    // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
    Vue.http.options.root = 'http://localhost:8083/';
    // 全局启用 emulateJSON 选项
    Vue.http.options.emulateJSON = true;
    var  vm=new Vue({
        el : '#app',
        data:{
           id:'',
            age:'',
            pwd:'',
            name:'',
            sex:'',
            email:'',
            face:'',
            faces:'',
            lists: [
                { id: '',pwd:'', name: '', age:'',email:'',faces:'' ,sex:'',face:''},]
        },

        created(){
            this.all();
        },
        methods:{
            all(){
                this.$http.get('user/alluser').then(result => {
                    // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
                    console.log(result.body)
                    if(result.body!=null){
                        vm.$data.lists=result.body.list;
                    }else{
                        alert("获取数据失败！");
                    }
                })
            },

            del(id){
                var bln=confirm("确认删除该数据嘛?");
                this.$http.get('user/del?id='+ id).then(result=>{
                    console.log(result.body)
                    if(result.body!=null){
                        alert(result.body.msg);
                        this.all()
                    }else{
                        alert("获取数据失败！");
                    }
                })
            },

            toupd(id){
                this.$http.get('user/getuserbyid?id='+ id).then(result=>{
                    console.log(result.body)
                document.getElementById('divdiv').style.display ='block';
                if(result.body!=null){
                    this.name=result.body.u.name;
                    this.pwd=result.body.u.pwd;
                    this.age=result.body.u.age;
                    this.id=result.body.u.id;
                    this.email=result.body.u.email;
                    this.faces=result.body.u.face;
                    this.face=result.body.u.face;
                    this.sex=result.body.u.sex;
                }else{
                    alert("获取数据失败！");
                }
                // this.allDept();
            });
            },
            // allDept(){
            //     this.$http.get('dept/getAllDept').then(result=>{
            //         console.log(result.body.list)
            //         if(result.body.list != null){
            //             vm.$data.deptLists=result.body.list;
            //         }else{
            //             alert("获取数据失败！");
            //         }
            //     })
            // },
        }
    });
</script>

</html>
